<template>
  <div class="container coupon">
    <!-- <van-nav-bar
      title=""
      left-text=""
      right-text="兑换"
      @click-right="onClickRight"
    /> -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="coupon-list-row">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              @load="getMyCoupon"
            >
              <div class="flex coupon-list" v-for="(item,index) in couponList" :key="index">
                <div style="width:30%;">
                  <!-- <img :src="carCoupon" alt="" style="width:100%;"> -->
                  <div class="coupon-money-row"><span class="coupon-money">{{item.Amount}}</span>元</div>
                  <div class="text"></div>
                </div>
                <div class="flex-1">
                  <div class="coupon-name">优惠券</div>
                  <div class="text">编号：{{item.CouponNumber}}</div>
                  <div class="text">有效期：{{item.StartTime}} ~ {{item.EndTime}}</div>
                </div>
              </div>
            </van-list>
          </div>
        </van-pull-refresh>
    
    <!-- <div class="coupon-list-row">
      <div class="flex coupon-list">
        <div style="width:30%;">
          <div></div>
          <div class="coupon-money-row"><span class="coupon-money">1.5</span>元</div>
          <div class="text">无使用门槛</div>
        </div>
        <div class="flex-1">
          <div class="coupon-name">停车券</div>
          <div class="text">编号：3455345353453</div>
          <div class="text">有效期：2019.02.12-2019.04.12</div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
import car from '@/assets/car-coupon.jpg';
export default {
  name: 'coupon',
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      error: false,
      couponList:[],
      active: 0,
      pageIndex:0,
      pageSize:10,
      carCoupon:car
    };
  },
  mounted() {
  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
     onClickRight(){
      this.$router.push({
          path: '/exchangeCuopon',
      })
    },
    onRefresh() {
      setTimeout(() => {
        this.pageIndex = 0;
        this.getMyCoupon();
        this.$toast('刷新成功');
        this.isLoading = false;
        this.finished = false;
      }, 500);
    },
    getMyCoupon(){
      this.$api.mine.getMyCoupon({   
          PageIndex:++this.pageIndex,
          PageSize:this.pageSize   
      }).then(res=> {
        this.loading = false;
        let data = res.Data;
        if(data.PageIndex==1){
          this.couponList = data.Data;
        }else{
          this.couponList = this.couponList.concat(data.Data);
        }
        if (this.couponList.length >= data.TotalNum) {
          this.finished = true;
        }
      }).catch(() => {
        this.error = true;
      })   
    },
    getShopCoupon(){
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.coupon {
  height: auto;
  .coupon-list-row {
    padding: .533333rem .266667rem;
    .coupon-list {
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
      padding: .533333rem;
      margin-bottom: .266667rem;
      .coupon-name {
        font-size: .426667rem;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
      .coupon-money-row {
        color:#f44;
        font-size: .373333rem;
        .coupon-money {
          font-size: .64rem;
        }
      }
    }
  }
}
</style>